<template>
  <div class="box" ref="target"></div>
</template>

<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'
import { onMounted, ref, defineComponent } from 'vue-demi'
// 🔔 Vue3.x 通过 ref 创建关联，模板中还是通过 ref="xxx" 绑定
const target = ref<HTMLDivElement | null>(null)
// 组件挂载完毕后，就可以通过 target.value 获取到元素
onMounted(() => {
  console.log(target.value)
})
/*
      useIntersectionObserver 函数 - 检测元素可见性
        1.stop 一个可执行的函数用来停止监听行为
        2.target 一个由ref api调用之后形成的RefImpl对象 也可以是一个dom对象
        3.isIntersecting 一个类型为布尔值的数据 当被监听元素进入视口区域时为true,离开视口区域时为false
        特别注意: 默认情况下，对于目标target是否进入视口区域的监听会一直进行
    */
// 检测元素可见性
const { stop } = useIntersectionObserver(
  // 被检测的目标元素，可以是组件，也可以是DOM元素
  target,
  ([{ isIntersecting }]) => {
    // 如果元素可见
    if (isIntersecting) {
      // 模拟发送请求
      console.log('isIntersecting元素是否可见，发送请求', isIntersecting)
      // 停止检测
      stop()
    }
  },
)
</script>

<style scoped lang="scss">
.box {
  width: 200px;
  height: 200px;
  background-color: pink;
  margin: 1000px auto;
}
</style>
